﻿<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:c4f="clr-namespace:Coding4Fun.Toolkit.Controls;assembly=Coding4Fun.Toolkit.Controls"
    xmlns:vis="clr-namespace:Hue_Demo_Phone.Converters"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Platform.WP8"
    xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
    x:Class="Hue_Demo_Phone.Views.HueClientView"
    mc:Ignorable="d"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
    <phone:PhoneApplicationPage.Resources>
     
     <!-- CONVERTER RESOURCES -->
     <vis:BooleanToVisibilityConverter x:Key="BoolToVis" />
     <vis:ReverseBooleanToVisibilityConverter x:Key="RevBoolToVis" />
	 <vis:ColorToOpacity x:Key="ColorToOpacity" />
	 <vis:HueLightToColor x:Key="HueToColor" />
     <!-- END CONVERTER RESOURCES -->
        
    </phone:PhoneApplicationPage.Resources>
	<phone:PhoneApplicationPage.ApplicationBar>
		<shell:ApplicationBar>
			<shell:ApplicationBarIconButton IconUri="/Assets/AppBar/sync.png" IsEnabled="True" Text="cycle" Click="StartLightCycle"/>
			<shell:ApplicationBarIconButton IconUri="/Assets/AppBar/sync_ufo.png" IsEnabled="True" Text="play" Click="PlaySong"/>
		</shell:ApplicationBar>
	</phone:PhoneApplicationPage.ApplicationBar>

	<phone:PhoneApplicationPage.FontFamily>
		<StaticResource ResourceKey="PhoneFontFamilyNormal"/>
	</phone:PhoneApplicationPage.FontFamily>
	<phone:PhoneApplicationPage.FontSize>
		<StaticResource ResourceKey="PhoneFontSizeNormal"/>
	</phone:PhoneApplicationPage.FontSize>
	<phone:PhoneApplicationPage.Foreground>
		<StaticResource ResourceKey="PhoneForegroundBrush"/>
	</phone:PhoneApplicationPage.Foreground>
<!--LayoutRoot is the root grid where all page content is placed-->
	<Grid x:Name="LayoutRoot" Background="Transparent">
		<MediaElement x:Name="ufo_tone" Source="/Assets/Audio/tone 3.wma" AutoPlay="False" />
		
        <!--Pivot Control-->
		<phone:Pivot Title="HUE 4 YOU">
			<!--Pivot item one-->
			<phone:PivotItem Header="light 1">
				<Grid>
					<Grid.RowDefinitions>
						<RowDefinition Height="Auto"/>
						<RowDefinition Height="*"/>
					</Grid.RowDefinitions>
					<Viewbox HorizontalAlignment="Center" Grid.RowSpan="2" VerticalAlignment="Center" Margin="0,94,0,31">
						<Canvas Width="45" Height="75" HorizontalAlignment="Center" VerticalAlignment="Center">
							<Path Data="F1M21.456,0C21.286,0 21.195,0.005 21.195,0.005 21.195,0.005 21.104,0 20.934,0 18.51,0 0,0.759 0,23.882 0,34.046 12.402,52.581 12.402,57.544L30.071,57.544C30.071,52.581 42.389,34.046 42.389,23.882 42.389,0.757 23.878,0 21.456,0z M26.208,52.557L24.259,52.557 24.259,39.686 18.296,39.686 18.296,52.557 16.257,52.557C15.41,50.309 14.09,47.541 12.322,43.885 9.225,37.485 4.987,28.724 4.987,23.882 4.987,16.001 7.414,10.489 12.2,7.5 16.109,5.058 20.453,4.988 20.934,4.988L20.99,4.988 21.16,4.994 21.366,4.988 21.456,4.988C21.937,4.988 26.281,5.058 30.19,7.5 34.977,10.489 37.403,16.001 37.403,23.882 37.403,28.73 33.19,37.495 30.113,43.898 28.36,47.546 27.05,50.314 26.208,52.557z" 
								Fill="{Binding HueLight1, Converter={StaticResource HueToColor}}" 
								Height="57.544" 
								Canvas.Left="1.118" 
								Width="42.39" 
								Stroke="#FF131212" 
								UseLayoutRounding="False" 
								StrokeThickness="0" 
								Canvas.Top="1.332" Opacity="0.9"/>
							<Path Data="F1M0,4.652L17.671,4.652 17.671,0 0,0z" 
								Fill="{Binding HueLight1, Converter={StaticResource HueToColor}}" 
								Height="4.651" Canvas.Left="13.316" Canvas.Top="61.4" Width="17.671" Stroke="#FF131212" UseLayoutRounding="False" StrokeThickness="0" Opacity="0.9"/>
							<Path Data="F1M0,4.652L8.787,4.652 8.787,0 0,0z" 
								Fill="{Binding HueLight1, Converter={StaticResource HueToColor}}"
								Height="4.651" Canvas.Left="17.778" Canvas.Top="68.534" Width="8.787" Stroke="#FF131212" UseLayoutRounding="False" StrokeThickness="0" Opacity="0.9"/>
						</Canvas>
					</Viewbox>
					
					<Grid Grid.Row="1" Grid.RowSpan="2">
						<Grid.RowDefinitions>
							<RowDefinition Height="6*"/>
							<RowDefinition Height="41*"/>
						</Grid.RowDefinitions>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="25*"/>
							<ColumnDefinition Width="25*"/>
							<ColumnDefinition Width="25*"/>
							<ColumnDefinition Width="25*"/>
						</Grid.ColumnDefinitions>
						<Border BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="White" Grid.Column="2"/>
						<Border BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="White" Grid.Column="1"/>
						<Border BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="White"/>
						<Slider Value="{Binding HueLight1.Red, Mode=TwoWay}" Margin="6" 
							Orientation="Vertical" Grid.Row="1" 
							SmallChange="1" LargeChange="25" 
							Maximum="255" >
							<i:Interaction.Triggers>
								<i:EventTrigger EventName="MouseLeftButtonUp">
									<Command:EventToCommand Command="{Binding UpdateLight1}" />
								</i:EventTrigger>
							</i:Interaction.Triggers>
						</Slider>
						<Border Opacity="{Binding HueLight1.Red, Converter={StaticResource ColorToOpacity}}" BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="#FFB20000"/>
						<Slider Value="{Binding HueLight1.Green, Mode=TwoWay}" 
                                Margin="6"
                                Orientation="Vertical" Grid.Row="1" 
                                SmallChange="1" LargeChange="25" 
                                Maximum="255" Grid.Column="1">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseLeftButtonUp">
                                    <Command:EventToCommand Command="{Binding UpdateLight1}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Slider>
                        <Border Opacity="{Binding HueLight1.Green, Converter={StaticResource ColorToOpacity}}" BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="#FF10B200" Grid.Column="1"/>
						<Slider Value="{Binding HueLight1.Blue, Mode=TwoWay}" Margin="6" 
							Orientation="Vertical" Grid.Row="1" 
							SmallChange="1" LargeChange="25" 
							Maximum="255" Grid.Column="2">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseLeftButtonUp">
                                    <Command:EventToCommand Command="{Binding UpdateLight1}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Slider>
                        <Border Opacity="{Binding HueLight1.Blue, Converter={StaticResource ColorToOpacity}}" BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="#FF0020B2" Grid.Column="2"/>
						<Slider Value="{Binding HueLight1.Brightness, Mode=TwoWay}" Margin="6" 
							Orientation="Vertical" Grid.Row="1" 
							SmallChange="1" LargeChange="25" 
							Maximum="255" Grid.Column="3" 
							Grid.ColumnSpan="4">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseLeftButtonUp">
                                    <Command:EventToCommand Command="{Binding UpdateLight1}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Slider>
                        <Border Opacity="{Binding HueLight1.Brightness, Converter={StaticResource ColorToOpacity}}" BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="White" Grid.Column="3" 
							Grid.ColumnSpan="4"/>
					</Grid>
					<Button Content="refresh light" 
                            Command="{Binding UpdateLight1}" 
                            Margin="-6,0" 
                            Height="100"
                            Visibility="Collapsed"
                            />
				</Grid>
			</phone:PivotItem>

			<!--Pivot item two-->
			<phone:PivotItem Header="light 2">
				<Grid >
					<Grid.RowDefinitions>
						<RowDefinition Height="Auto"/>
						<RowDefinition Height="*"/>
					</Grid.RowDefinitions>
					<Viewbox HorizontalAlignment="Center" Grid.RowSpan="2" VerticalAlignment="Center" Margin="0,94,0,31">
						<Canvas Width="45" Height="75" HorizontalAlignment="Center" VerticalAlignment="Center">
							<Path Data="F1M21.456,0C21.286,0 21.195,0.005 21.195,0.005 21.195,0.005 21.104,0 20.934,0 18.51,0 0,0.759 0,23.882 0,34.046 12.402,52.581 12.402,57.544L30.071,57.544C30.071,52.581 42.389,34.046 42.389,23.882 42.389,0.757 23.878,0 21.456,0z M26.208,52.557L24.259,52.557 24.259,39.686 18.296,39.686 18.296,52.557 16.257,52.557C15.41,50.309 14.09,47.541 12.322,43.885 9.225,37.485 4.987,28.724 4.987,23.882 4.987,16.001 7.414,10.489 12.2,7.5 16.109,5.058 20.453,4.988 20.934,4.988L20.99,4.988 21.16,4.994 21.366,4.988 21.456,4.988C21.937,4.988 26.281,5.058 30.19,7.5 34.977,10.489 37.403,16.001 37.403,23.882 37.403,28.73 33.19,37.495 30.113,43.898 28.36,47.546 27.05,50.314 26.208,52.557z" 
								Fill="{Binding HueLight2, Converter={StaticResource HueToColor}}" 
								Height="57.544" 
								Canvas.Left="1.118" 
								Width="42.39" 
								Stroke="#FF131212" 
								UseLayoutRounding="False" 
								StrokeThickness="0" 
								Canvas.Top="1.332" Opacity="0.9"/>
							<Path Data="F1M0,4.652L17.671,4.652 17.671,0 0,0z" 
								Fill="{Binding HueLight2, Converter={StaticResource HueToColor}}" 
								Height="4.651" Canvas.Left="13.316" Canvas.Top="61.4" Width="17.671" Stroke="#FF131212" UseLayoutRounding="False" StrokeThickness="0" Opacity="0.9"/>
							<Path Data="F1M0,4.652L8.787,4.652 8.787,0 0,0z" 
								Fill="{Binding HueLight2, Converter={StaticResource HueToColor}}"
								Height="4.651" Canvas.Left="17.778" Canvas.Top="68.534" Width="8.787" Stroke="#FF131212" UseLayoutRounding="False" StrokeThickness="0" Opacity="0.9"/>
						</Canvas>
					</Viewbox>
					<Grid Grid.Row="1" Grid.RowSpan="2">
						<Grid.RowDefinitions>
							<RowDefinition Height="6*"/>
							<RowDefinition Height="41*"/>
						</Grid.RowDefinitions>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="25*"/>
							<ColumnDefinition Width="25*"/>
							<ColumnDefinition Width="25*"/>
							<ColumnDefinition Width="25*"/>
						</Grid.ColumnDefinitions>
						<Border BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="White" Grid.Column="2"/>
						<Border BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="White" Grid.Column="1"/>
						<Border BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="White"/>
						<Slider Value="{Binding HueLight2.Red, Mode=TwoWay}" Margin="6" 
							Orientation="Vertical" Grid.Row="1" 
							SmallChange="1" LargeChange="25" 
							Maximum="255">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseLeftButtonUp">
            <Command:EventToCommand Command="{Binding UpdateLight2}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Slider>

                        <Slider Value="{Binding HueLight2.Red, Mode=TwoWay}" />
                            <Border Opacity="{Binding HueLight2.Red, Converter={StaticResource ColorToOpacity}}" BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="#FFB20000"/>
						<Slider Value="{Binding HueLight2.Green, Mode=TwoWay}" Margin="6" 
							Orientation="Vertical" Grid.Row="1" 
							SmallChange="1" LargeChange="25" 
							Maximum="255" Grid.Column="1">
                            <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseLeftButtonUp">
                                <Command:EventToCommand Command="{Binding UpdateLight2}" />
                            </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Slider>
                        <Border Opacity="{Binding HueLight2.Green, Converter={StaticResource ColorToOpacity}}" BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="#FF10B200" Grid.Column="1"/>
                        <Slider Value="{Binding HueLight2.Blue, Mode=TwoWay}" Margin="6" 
							Orientation="Vertical" Grid.Row="1" 
							SmallChange="1" LargeChange="25" 
							Maximum="255" Grid.Column="2">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseLeftButtonUp">
                                    <Command:EventToCommand Command="{Binding UpdateLight2}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        
                        </Slider>
                            <Border Opacity="{Binding HueLight2.Blue, Converter={StaticResource ColorToOpacity}}" BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="#FF0020B2" Grid.Column="2"/>
                        <Slider Value="{Binding HueLight2.Brightness, Mode=TwoWay}" Margin="6" 
							Orientation="Vertical" Grid.Row="1" 
							SmallChange="1" LargeChange="25" 
							Maximum="255" Grid.Column="3" 
							Grid.ColumnSpan="4">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseLeftButtonUp">
                                    <Command:EventToCommand Command="{Binding UpdateLight2}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Slider>
                            <Border Opacity="{Binding HueLight2.Brightness, Converter={StaticResource ColorToOpacity}}" BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="White" Grid.Column="3" 
							Grid.ColumnSpan="4"/>
					</Grid>
					<Button Content="refresh light" 
                            Command="{Binding UpdateLight2}" 
                            Height="100"
                            Visibility="Collapsed" />
				</Grid>
			</phone:PivotItem>

			<phone:PivotItem Header="light 3" >
				<Grid >
					<Grid.RowDefinitions>
						<RowDefinition Height="Auto"/>
						<RowDefinition Height="*"/>
					</Grid.RowDefinitions>
					<Viewbox HorizontalAlignment="Center" Grid.RowSpan="2" VerticalAlignment="Center" Margin="0,94,0,31">
						<Canvas Width="45" Height="75" HorizontalAlignment="Center" VerticalAlignment="Center">
							<Path Data="F1M21.456,0C21.286,0 21.195,0.005 21.195,0.005 21.195,0.005 21.104,0 20.934,0 18.51,0 0,0.759 0,23.882 0,34.046 12.402,52.581 12.402,57.544L30.071,57.544C30.071,52.581 42.389,34.046 42.389,23.882 42.389,0.757 23.878,0 21.456,0z M26.208,52.557L24.259,52.557 24.259,39.686 18.296,39.686 18.296,52.557 16.257,52.557C15.41,50.309 14.09,47.541 12.322,43.885 9.225,37.485 4.987,28.724 4.987,23.882 4.987,16.001 7.414,10.489 12.2,7.5 16.109,5.058 20.453,4.988 20.934,4.988L20.99,4.988 21.16,4.994 21.366,4.988 21.456,4.988C21.937,4.988 26.281,5.058 30.19,7.5 34.977,10.489 37.403,16.001 37.403,23.882 37.403,28.73 33.19,37.495 30.113,43.898 28.36,47.546 27.05,50.314 26.208,52.557z" 
								Fill="{Binding HueLight3, Converter={StaticResource HueToColor}}" 
								Height="57.544" 
								Canvas.Left="1.118" 
								Width="42.39" 
								Stroke="#FF131212" 
								UseLayoutRounding="False" 
								StrokeThickness="0" 
								Canvas.Top="1.332" Opacity="0.9"/>
							<Path Data="F1M0,4.652L17.671,4.652 17.671,0 0,0z" 
								Fill="{Binding HueLight3, Converter={StaticResource HueToColor}}" 
								Height="4.651" Canvas.Left="13.316" Canvas.Top="61.4" Width="17.671" Stroke="#FF131212" UseLayoutRounding="False" StrokeThickness="0" Opacity="0.9"/>
							<Path Data="F1M0,4.652L8.787,4.652 8.787,0 0,0z" 
								Fill="{Binding HueLight3, Converter={StaticResource HueToColor}}"
								Height="4.651" Canvas.Left="17.778" Canvas.Top="68.534" Width="8.787" Stroke="#FF131212" UseLayoutRounding="False" StrokeThickness="0" Opacity="0.9"/>
						</Canvas>
					</Viewbox>
					<Grid Grid.Row="1" Grid.RowSpan="2">
						<Grid.RowDefinitions>
							<RowDefinition Height="6*"/>
							<RowDefinition Height="41*"/>
						</Grid.RowDefinitions>
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="25*"/>
							<ColumnDefinition Width="25*"/>
							<ColumnDefinition Width="25*"/>
							<ColumnDefinition Width="25*"/>
						</Grid.ColumnDefinitions>
						<Border BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="White" Grid.Column="2"/>
						<Border BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="White" Grid.Column="1"/>
						<Border BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="White"/>
                        <Slider Value="{Binding HueLight3.Red, Mode=TwoWay}" Margin="6" 
							Orientation="Vertical" Grid.Row="1" 
							SmallChange="1" LargeChange="25" 
							Maximum="255">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseLeftButtonUp">
                                    <Command:EventToCommand Command="{Binding UpdateLight3}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Slider>
                            <Border Opacity="{Binding HueLight3.Red, Converter={StaticResource ColorToOpacity}}" BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="#FFB20000"/>
                        <Slider Value="{Binding HueLight3.Green, Mode=TwoWay}" Margin="6" 
							Orientation="Vertical" Grid.Row="1" 
							SmallChange="1" LargeChange="25" 
							Maximum="255" Grid.Column="1">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseLeftButtonUp">
                                    <Command:EventToCommand Command="{Binding UpdateLight3}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Slider>
                            <Border Opacity="{Binding HueLight3.Green, Converter={StaticResource ColorToOpacity}}" BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="#FF10B200" Grid.Column="1"/>
                        <Slider Value="{Binding HueLight3.Blue, Mode=TwoWay}" Margin="6" 
							Orientation="Vertical" Grid.Row="1" 
							SmallChange="1" LargeChange="25" 
							Maximum="255" Grid.Column="2">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseLeftButtonUp">
                                    <Command:EventToCommand Command="{Binding UpdateLight3}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Slider>
                            <Border Opacity="{Binding HueLight3.Blue, Converter={StaticResource ColorToOpacity}}" BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="#FF0020B2" Grid.Column="2"/>
                        <Slider Value="{Binding HueLight3.Brightness, Mode=TwoWay}" Margin="6" 
							Orientation="Vertical" Grid.Row="1" 
							SmallChange="1" LargeChange="25" 
							Maximum="255" Grid.Column="3" 
							Grid.ColumnSpan="4">
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseLeftButtonUp">
                                    <Command:EventToCommand Command="{Binding UpdateLight3}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Slider>
                            <Border Opacity="{Binding HueLight3.Brightness, Converter={StaticResource ColorToOpacity}}" BorderBrush="Black" 
							BorderThickness="0" Margin="6" 
							Background="White" Grid.Column="3" 
							Grid.ColumnSpan="4"/>
					</Grid>
					<Button Content="refresh light" 
                            Command="{Binding UpdateLight3}" 
                            Height="100"
                            Visibility="Collapsed" />
				</Grid>
			</phone:PivotItem>
		</phone:Pivot>
		<Grid x:Name="startupUI" 
			Background="{StaticResource PhoneBackgroundBrush}"
			Visibility="{Binding IsUserRegistered, Converter={StaticResource RevBoolToVis}}" 
			d:IsHidden="True"
              >
			<StackPanel>
				<TextBlock TextWrapping="Wrap" Text="enter hue username" Style="{StaticResource PhoneTextTitle2Style}"/>
				<TextBox Text="{Binding UserName, Mode=TwoWay}"  TextWrapping="Wrap" InputScope="LogOnName"/>
				<Button Content="register user" Command="{Binding RegisterUser}"/>
				<TextBlock Text="{Binding ConnectionError}"  TextWrapping="Wrap" />
			</StackPanel>
		</Grid>
	</Grid>
    
</phone:PhoneApplicationPage>